<template>
	<view class="bg-white main">
		<view class="content_dh">
			<view class="content_top">
				<view class="content_top_images">
					<image :src="goods.images" mode="widthFix"></image>
				</view>
				<view class="content_top_main">
					<view class="content_top_main_one">{{goods.title}}</view>
					<view class="content_top_main_two">款号：{{goods.barCode}}</view>
					<view class="content_top_main_three">
						<view class="content_top_main_inventory">
							起定量：<text class="hong">1</text> 件
						</view>
					</view>
					<view class="content_top_main_four dj_mg">
						<view class="time_red">金重：</view>
						<view class="red time_red">{{ goods.goldWeight === null ? '0.00' : goods.goldWeight}}g</view>
					</view>
				</view>
			</view>
			<!-- 定货流程 -->
			<view class="dhlc">
				<view class="dhlc_ico">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/f35706dd112b47ec85cf4af11ae4705d.png"
						mode="widthFix"></image>
					<view class="">定货流程</view>
				</view>
				<view class="dhlc_name">
					付定金锁定金价>完成生产>付尾款>发货
				</view>
				<view class="dhlc_why">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/6da4fca8a96e418da208b8cc24efcdc2.png"
						mode="widthFix"></image>
				</view>
			</view>
			<!-- 提醒 -->
			<view class="tx red">
				提交定单后会有专业业务人员电话联系确认
			</view>
			<view class="list">
				<view class="table">
					<view class="row header">
						<text class="cell">序号</text>
						<text class="cell"
							v-if="(goods && goods.storeCategoryName && goods.storeCategoryName == '戒指') || (goods && goods.storeCategoryName && goods.storeCategoryName == '手镯') || (goods && goods.storeCategoryName && goods.storeCategoryName == '手链') ">{{ goods.storeCategoryName === '手链' ? '长度' : '手寸' }}</text>
						<text class="cell">金重</text>
						<text class="cell">数量</text>
						<text class="cell">操作</text>
					</view>
					<view class="row" v-for="(item,index) in localTableData" :key="index">
						<text class="cell">{{index+1}}</text>
						<!-- 手寸/长度输入 -->
						<view class="cell"
							v-if="(goods && goods.storeCategoryName && (goods.storeCategoryName === '戒指' || goods.storeCategoryName === '手镯' || goods.storeCategoryName === '手链'))">
							<view class="size-selector">
								<picker mode="selector" :range="sizeOptions" range-key="label"
									@change="(e) => handleSizeSelect(index, e.detail.value)"
									v-if="!showCustomInput[index]">
									<view class="picker-btn">
										<text>{{ localTableData[index].specify || ((goods && goods.storeCategoryName === '手链') ? '选择长度' : '选择手寸') }}</text>
										<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
									</view>
								</picker>
								<view class="custom-input" v-else>
									<input type="digit" v-model="localTableData[index].specify"
										:placeholder="(goods && goods.storeCategoryName === '手链') ? '长度' : '手寸'"
										@blur="handleInputBlur(index)" focus />
								</view>
								<text class="custom-trigger" @click="toggleCustomInput(index)">
									{{ showCustomInput[index] ? '选择预设' : '自定义' }}
								</text>
							</view>
						</view>
						<!-- 重量 -->
						<view class="cell">
							<view class="weight-selector">
								<picker mode="selector" :range="weightOptions" range-key="label"
									@change="(e) => handleWeightSelect(index, e.detail.value)"
									v-if="!showCustomWeightInput[index]">
									<view class="picker-btn">
										<text>{{ item.goldWeight || '选择重量' }}</text>
										<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
									</view>
								</picker>
								<!-- 输入模式 -->
								<view class="custom-input" v-else>
									<input type="digit" v-model="item.goldWeight" placeholder="输入重量"
										@blur="handleWeightInputBlur(index)" focus />
								</view>
								<text class="custom-trigger" @click="toggleWeightInput(index)">
									{{ showCustomWeightInput[index] ? '选择预设' : '自定义' }}
								</text>
							</view>
						</view>
						<!-- 数量 -->
						<view class="cell">
							<view class="stepper">
								<view @click="decrease(item)" class="stepper_btn">-</view>
								<input type="number" v-model="item.number" placeholder="数量" min="1" value="1"
									disabled="true" />
								<view @click="increase(item)" class="stepper_btn">+</view>
							</view>
						</view>
						<!-- <view class="cell">
							<input type="number" v-model="item.number" placeholder="数量" />
						</view> -->
						<text class="cell" @click="delItem(index)">删除</text>
					</view>
					<view class="row" @click="addItem">
						<text class="addcell">添加</text>
					</view>
				</view>
			</view>
			<view class="content_addCart">
				<view class="addCart" @tap="cart_confirm_event">加入购物袋</view>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		props: {
			goods: Object,
			goods_spec_List: Array,
			goods_list: Array,
			dtableData: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				params: {},
				buy_number: 1,
				buy_event_type: 'cart',
				is_success_tips: 1,
				goodsLists: [],
				// 手寸/长度
				localTableData: [...this.dtableData],
				sizeOptions: [{
						label: '10#',
						value: '10'
					},
					{
						label: '11#',
						value: '11'
					},
					{
						label: '12#',
						value: '12'
					},
					{
						label: '13#',
						value: '13'
					},
					{
						label: '14#',
						value: '14'
					},
					{
						label: '15#',
						value: '15'
					},
					{
						label: '16#',
						value: '16'
					},
					{
						label: '17#',
						value: '17'
					},
					{
						label: '18#',
						value: '18'
					},
					{
						label: '19#',
						value: '19'
					},
					{
						label: '20#',
						value: '20'
					},
					{
						label: '自定义',
						value: ''
					}
				],
				showCustomInput: {},
				// 重量预设选项
				weightOptions: [{
						label: '1g',
						value: '1'
					},
					{
						label: '2g',
						value: '2'
					},
					{
						label: '3g',
						value: '3'
					},
					{
						label: '4g',
						value: '4'
					},
					{
						label: '5g',
						value: '5'
					},
					{
						label: '6g',
						value: '6'
					},
					{
						label: '7g',
						value: '7'
					},
					{
						label: '8g',
						value: '8'
					},
					{
						label: '9g',
						value: '9'
					},
					{
						label: '10g',
						value: '10'
					},
					{
						label: '20g',
						value: '20'
					},
					{
						label: '30g',
						value: '30'
					},
					{
						label: '40g',
						value: '40'
					},
					{
						label: '50g',
						value: '50'
					},
					{
						label: '60g',
						value: '60'
					},
					{
						label: '自定义',
						value: ''
					}
				],
				// 每行的输入状态
				showCustomWeightInput: {}
			};
		},
		watch: {
			dtableData: {
				handler(newVal) {
					this.localTableData = [...newVal];
				},
				deep: true
			}
		},
		methods: {
			// 手寸切换输入模式
			toggleCustomInput(index) {
				this.$set(this.showCustomInput, index, !this.showCustomInput[index]);
			},
			// 处理手寸输入完成
			handleInputBlur(index) {
				this.$set(this.showCustomInput, index, false);
				this.emitUpdate();
			},
			// 处理手尺选择
			handleSizeSelect(index, pickerIndex) {
				const selected = this.sizeOptions[pickerIndex];
				if (selected.label === '自定义') {
					this.$set(this.showCustomInput, index, true);
				} else {
					this.$set(this.localTableData, index, {
						...this.localTableData[index],
						specify: selected.value
					});
					this.emitUpdate();
				}
			},
			// 金重切换输入模式
			toggleWeightInput(index) {
				this.$set(this.showCustomWeightInput, index, !this.showCustomWeightInput[index]);
			},
			// 处理重量选择
			handleWeightSelect(index, pickerIndex) {
				const selected = this.weightOptions[pickerIndex];
				if (selected.label === '自定义') {
					this.$set(this.showCustomWeightInput, index, true);
				} else {
					this.$set(this.localTableData, index, {
						...this.localTableData[index],
						goldWeight: selected.value
					});
					this.emitUpdate();
				}
			},
			// 处理重量输入完成
			handleWeightInputBlur(index) {
				this.$set(this.showCustomWeightInput, index, false);
				this.emitUpdate();
			},
			increase(item) {
				if (typeof item.number !== 'number' || isNaN(item.number)) {
					item.number = 1;
				}
				item.number += 1;
			},
			decrease(item) {
				if (typeof item.number !== 'number' || isNaN(item.number)) {
					item.number = 1;
				}
				if (item.number > 1) {
					item.number -= 1;
				}
			},
			// 删除规格
			delItem(index) {
				this.localTableData.splice(index, 1);
				this.emitUpdate();
			},
			// 添加规格
			addItem() {
				const newItem = {
					goldWeight: "",
					number: "1"
				};
				if ((this.goods && this.goods.storeCategoryName && this.goods.storeCategoryName == '戒指') || (this.goods &&
						this.goods.storeCategoryName && this.goods.storeCategoryName == '手镯') || (this.goods && this.goods
						.storeCategoryName && this.goods.storeCategoryName == '手链')) {
					newItem.specify = "";
				}
				this.localTableData = [...this.localTableData, newItem];
				this.emitUpdate()
			},
			// 更新父组件数据
			emitUpdate() {
				this.$emit('update', [...this.localTableData]);
			},
			// 关闭弹出层
			closePopupdh() {
				this.$emit("closePopupdh")
			},
			// 加入购物袋
			cart_confirm_event() {
				var temp_data = this.goods_spec_List;
				var sku_count = temp_data.length;
				var active_count = 0;
				var goods_data = [];
				var goods_id = this.goods.id;

				var isValid = true;
				var filledRows = 0;

				this.goods_spec_List.forEach(item => {
					if ((item.is_active || null) != null) {
						var spec = [];
						var sku = item.sku.split(',');
						var len = sku.length;
						sku.forEach((value, index) => {
							var name = '';
							if (len > 2) {
								if (index == 0) {
									name = '手寸'
								} else {
									name = '金重'
								}
							} else {
								if (index == 0) {
									name = '手寸'
								} else {
									name = '金重'
								}
							}
							spec.push({
								type: name,
								value: value
							});
						})
						goods_data.push({
							goods_id: goods_id,
							id: item.attrvId,
							stock: 1,
							spec: spec || '',
							buy_event_type: '现货'
						});
					}
				});

				this.localTableData.forEach((item, index) => {
					var spec = [];
					var rowIsFilled = false;

					if ((item.specify || 0) != 0) {
						spec.push({
							type: (this.goods && this.goods.storeCategoryName === '手链') ? '长度' : '手寸',
							value: item.specify
						});
						rowIsFilled = true;
					}

					if ((item.goldWeight || 0) != 0) {
						spec.push({
							type: '金重',
							value: item.goldWeight
						});
						rowIsFilled = true;
					}

					if (rowIsFilled) {
						goods_data.push({
							goods_id: goods_id,
							id: '0',
							stock: item.number,
							spec: spec || '',
							buy_event_type: '定货'
						});
						filledRows++;
					}
				});

				// 如果没有任何行被填写，提示用户
				if (filledRows === 0) {
					uni.showToast({
						title: '请填写至少一行数据',
						icon: 'none'
					});
					return;
				}

				switch (this.buy_event_type) {
					case 'buy':
						var data = {
							buy_type: "goods",
							goods_data: encodeURIComponent(base64.encode(JSON.stringify([{
								goods_id: this.goods.id,
								stock: this.buy_number,
								spec: spec
							}])))
						};
						uni.switchTab({
							url: '/pages/cart/cart?data=' + encodeURIComponent(base64.encode(JSON.stringify(data)))
						});
						this.popup_close_event();
						break;

						// 加入购物车
					case 'cart':
						this.goods_cart_event(goods_data);
						break;

					default:
						uni.showToast({
							title: "操作事件类型有误"
						})
				}
			},
			// 加入购物车事件
			goods_cart_event(goods_data) {
				console.log(goods_data, 'goods_data参数');
				let url = app.globalData.get_request_url("cart/save");
				uni.request({
					url: url,
					data: {
						goods_data: goods_data
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							if (this.is_success_tips == 1) {
								uni.showToast({
									title: res.data.msg
								})
								setTimeout(() => {
									this.closePopupdh();
								}, 1000);
							}
						} else {
							if (app.globalData.is_login_check(res.data, this, 'get_data')) {
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									duration: 3000
								});
							}
						}
						uni.hideLoading()
					}
				})
			},

			// 限制只能输入数字
			limitToNumber(key, event) {
				// 获取输入的值
				let value = event.target.value;
				// 使用正则表达式替换非数字字符
				value = value.replace(/\D/g, '');
				// 更新数据模型
				this.goodsInfo[key] = value;
			},
			addCart(id) {
				uni.switchTab({
					url: "/pages/cart/cart?id=" + id
				})
			}
		}
	};
</script>
<style>
	.main {
		height: 500px;
		background-color: white;
		overflow: auto;
		font-size: 13px;
	}

	.content_type {
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1rpx solid #f4f4f4;
	}

	/* 现货 */

	.xz {
		background-color: white;
		border: 1px solid #e93325;
	}

	.content_type_xh,
	.content_type_dh {
		width: 50%;
	}

	.active {
		color: red;
		border-bottom: 2px solid red;
	}

	.content_top {
		display: flex;
		height: 100px;
		padding-top: 10px;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.content_top_images image {
		width: 100px;
		height: 100px;
	}

	.content_top_main {
		margin-left: 10px;
	}

	.content_top_main_one {
		width: 230px;
		height: 20px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.content_top_main_two,
	.content_top_main_three,
	.content_top_main_four {
		margin-top: 8px;
		color: black;
	}

	.content_top_main_three,
	.content_top_main_four {
		display: flex;
	}

	.content_top_main_jcPrice {
		display: flex;
	}

	.content_top_main_surcharge {
		display: flex;
		margin-left: 10px;
	}

	.red {
		color: red;
		display: flex;
	}

	.time_red {
		padding-top: 0;
	}

	.dj_mg {
		/* margin-top: -8rpx; */
	}

	/* 提示 */
	.order_tip {
		height: 30px;
		text-align: center;
		line-height: 30px;
		display: flex;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.tip {
		color: red;
		padding-left: 20rpx;
	}

	.tip_con {
		color: red;
	}

	/* 手寸 */
	.size {
		width: 100%;
		position: relative;
		display: flex;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.size_name {
		position: absolute;
		top: 0;
		left: 20rpx;
		letter-spacing: 10px;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		color: black;
	}

	.size_type {
		margin-left: 15%;
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.size_type_one {
		width: 15%;
		height: 25px;
		text-align: center;
		line-height: 25px;
		background-color: #f1f7f7;
		border-radius: 5px;
		border: 1px solid #8a8585;
		margin: 5px 5px;
		padding-right: 10px;
	}

	/* .size_type_one:hover{
	color: white;
	background-color: red;
} */
	.activeSize {
		color: white;
		background-color: red;
		border: 0;
	}

	/* 数量 */
	.number {
		height: 40px;
		text-align: center;
		line-height: 40px;
		display: flex;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.number_name {
		letter-spacing: 10px;
		padding-left: 20rpx;
		font-size: 14px;
		color: black;
	}

	.nub {
		position: relative;
		width: 100px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.zero {
		width: 140px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 20px;
		background-color: #f1f7f7;
		color: black;
	}

	.jian {
		position: absolute;
		top: 7px;
		left: 4px;
		width: 20px;
		height: 25px;
		border-radius: 50%;
		background-color: #ffffff;
		text-align: center;
		line-height: 25px;
		color: #c0c0c0;
	}

	.jia {
		position: absolute;
		top: 7px;
		right: 4px;
		width: 20px;
		height: 25px;
		border-radius: 50%;
		background-color: #ffffff;
		text-align: center;
		line-height: 25px;
		color: #c0c0c0;
	}

	/* 商品列表 */
	.content_bottom {
		margin-bottom: 70px;
		/* height: 300px; */
	}

	.jl_footer {
		padding-bottom: 50px;
	}

	.content_bottom_item {
		width: 90%;
		height: 60px;
		background-color: #f1f7f7;
		border-radius: 10px;
		margin: 10px auto;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 10px;
		position: relative;
	}

	.content_bottom_item .xuanzong {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.content_bottom_item_two {
		display: flex;
		margin-top: 2px;
	}

	.content_bottom_item_two_price {
		margin-left: 10px;
	}

	.content_bottom_item_three {
		margin-bottom: 2px;
		margin-top: 2px;
	}

	.content_bottom_item_four {
		display: flex;
		/* margin-left: 10px; */
		margin-top: 2px;
	}

	.content_bottom_item_four_price {
		margin-left: 10px;
	}

	/* 订货 */
	.time {
		display: flex;
	}

	.dhlc {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.dhlc_ico {
		display: flex;
		align-items: center;
		color: red;
		font-size: 12px;
		letter-spacing: 2px;
	}

	.dhlc_name {
		color: black;
	}

	.dhlc_ico image {
		width: 25px;
		height: 25px;
	}

	.dhlc_why image {
		width: 25px;
		height: 25px;
	}

	/* 提醒 */
	.tx {
		height: 10px;
		border-bottom: 1rpx solid #f4f4f4;
		text-align: center;
		line-height: 10px;
		padding-left: 20rpx;
	}

	/* 注释 */
	.note {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		/* margin-left: 5px; */
	}

	.note_logo image {
		width: 25px;
		height: 25px;
	}

	.note_title {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
	}

	.hong {
		display: inline-block;
		color: red;
	}

	/* 多选列表 */
	.list {
		margin-top: 10px;
		padding-bottom: 60px;
	}

	.list_item {
		margin-top: 10px;
		margin-left: 15px;
		font-size: 10px;
		padding-bottom: 10px;
	}

	.list_item button {
		margin: auto;
		width: 120px;
		font-size: 17px;
		background-color: #e2d2ae;
	}

	.list_item input {
		border: 1px solid black;
		width: 100px;
		margin-top: 5px;
		margin-bottom: 7px;
	}

	.addgoods {
		width: 100%;
		text-align: center;
		margin-top: 5px;
	}

	.table {
		display: flex;
		flex-direction: column;
		border: 1px solid #000;
		margin-left: 15px;
		margin-right: 15px;
	}

	.row {
		display: flex;
		border-bottom: 1px solid #000;
	}

	.header {
		font-weight: bold;
	}

	.cell {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 8rpx;
		text-align: center;
		border-right: 1px solid black;
		font-size: 13px;
	}

	.addcell {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		border-right: 1px solid black;
		font-size: 15px;
	}

	/* 手寸/长度 */
	.custom-trigger {
		margin-left: 10px;
		color: #007aff;
		font-size: 14px;
		font-size: 12px;
	}

	/* 数量 */
	.stepper {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.stepper input{
		width: 40rpx;
	}
	.stepper_btn{
		width: 35rpx !important;
		height: 35rpx !important;
		background-color: #ccc;
		color: black;
		font-size: 18px;
		border-radius: 50% !important;
		text-align: center;
		line-height: 35rpx;
		font-weight: bold;
	}

	/* 规格 */
	/* 金重 */
	.gold_weight {
		border-top: 1rpx solid #f4f4f4;
	}

	.specifications,
	.gold_weight {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.specifications_name,
	.gold_weight_name {
		position: absolute;
		top: 10px;
		left: 10px;
		color: black;
		font-size: 14px;
		letter-spacing: 2px;
	}

	.specifications_type,
	.gold_weight_type {
		/* position: absolute; */
		margin-left: 15%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.specifications_type_one,
	.gold_weight_type_one {
		width: 15%;
		height: 25px;
		text-align: center;
		line-height: 25px;
		background-color: #f1f7f7;
		border-radius: 5px;
		margin: 5px 5px;
		padding-right: 10px;
		border: 1px solid #8a8585;
	}

	/* 数量 */
	.number_dh {
		border-top: 1rpx solid #f4f4f4;
	}

	/* 注意 */
	.attention {
		/* border-top: 1rpx solid #f4f4f4; */
		width: 100%;
		margin: 15px 15px;
		font-size: 13px;
		margin-bottom: 20px;
	}

	.attention_name {
		padding-right: 30px;
	}

	/* 加入购物车 */
	.content_addCart {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		padding-bottom: 10px;
		background-color: white;
		padding-top: 10px;
		/* height: 50px; */
	}

	.total {
		margin-bottom: 10px;
		margin-left: 20px;
		font-weight: bold;
	}

	.addCart {
		width: 90%;
		height: 40px;
		margin: 0 auto;
		border-radius: 20px;
		text-align: center;
		line-height: 40px;
		/* background-color: #edb8b4; */
		background-color: #e93325;
		font-size: 15px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.num {
		margin-left: 5px;
	}
</style>